<template>
  <label :class="classes">
    <span :class="checkboxClass">
      <input
        :name="name"
        type="checkbox"
        :disabled="disabled"
        @change="handleChange"
        :class="`${prefixCls}-input`"
        :checked="stateChecked"
      />
      <span
        :class="`${prefixCls}-inner`"
        :style="{ ...styleObj, ...pseudoEmtBGC }"
      ></span>
    </span>
    <span v-if="hasDefaultSlot"  :contenteditable="contenteditable"
       >
      <slot></slot>
    </span>
  </label>
</template>
<script>
export default {
  name: "em-checkbox",
  props: {
    prefixCls: {
      default: "em-checkbox",
      type: String,
    },
    indeterminate: Boolean, //设置是否是半选状态
    defaultChecked: Boolean,
    checked: { type: Boolean, default: undefined }, //指定当前是否选中
    disabled: Boolean, //失效状态
    name: String, //input 名字
    isGroup: Boolean, //是不是组
    value: [String, Number, Boolean],
    onGroupChange: Function,
    styleObj: Object, //多选边框颜色   边框角度样式对象
    defaultPseudoElementBackgroundColor: {
      //伪元素颜色
      default: () => ({ "--pseudoElementBackgroundColor": "#fff" }), //类型为Object / Array的数据类型默认值必须使用工厂函数来返回默认值
      type: Object,
    },
    pseudoElementBackgroundColor: String,
    contenteditable:{
      default:true,
      type:Boolean
    }
  },
  model: {
    prop: "checked", //允许自定义组件在使用 v-model 时定制 prop 和 event
  },
  data() {
    const {
      checked,
      defaultChecked,
      defaultPseudoElementBackgroundColor,
      pseudoElementBackgroundColor,
    } = this;
    return {
      stateChecked: checked == undefined ? defaultChecked : checked,
      pseudoEmtBGC:
        pseudoElementBackgroundColor == undefined
          ? defaultPseudoElementBackgroundColor
          : { "--pseudoElementBackgroundColor": pseudoElementBackgroundColor },
    };
  },
  computed: {
    hasDefaultSlot() {
      //判断是否占用了插槽
      return !!this.$slots.default;
      
    },

    classes() {
      const { prefixCls } = this;
      return {
        [`${prefixCls}-wrapper`]: true,
      };
    },
    checkboxClass() {
      const { prefixCls, indeterminate, stateChecked, disabled } = this;
      return {
        [`${prefixCls}`]: true,
        [`${prefixCls}-checked`]: stateChecked,
        [`${prefixCls}-disabled`]: disabled,
        [`${prefixCls}-indeterminate`]: indeterminate,
      };
    },
  },
  methods: {
    handleChange(event) {
      //点击的时候向父组建发送 多选框名字，value,是否选中状态
      const targetChecked = event.target.checked;
      this.$emit("input", targetChecked);
      const { name, value, checked } = this;
      if (checked === undefined) {
        this.stateChecked = targetChecked;
      }
      const target = {
        name,
        value,
        checked: targetChecked,
      };
      this.$emit("change", {
        target,
        stopPropagation() {
          event.stopPropagation();
        },
        preventDefault() {
          event.preventDefault();
        },
      });
      this.$emit("updateCheckbox",this.$props);
      
      if (this.isGroup) {
        this.onGroupChange({ target });
      }
    },
  },
  watch: {
    checked(val) {
      this.stateChecked = val;
    },
    pseudoElementBackgroundColor(val){  //解决 父组件 v-model 子组件没有时时变化的问题
      this.pseudoEmtBGC={ "--pseudoElementBackgroundColor": val }
    },
    checkBoxBorder(val){
      this.checkBoxBorder=val
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./main.scss";
</style>
